<template>
	<view>
		<view class="padding-left likeButton">
			<view class="cu-capsule round">
				<view class='cu-tag bg-red '>
					<text class='cuIcon-likefill'></text>
				</view>
				<view class="cu-tag bg-red">
					10086
				</view>
			</view>
		</view>
		<view class="grid margin-bottom  col-2 voidBody">
			<view class="padding-sm Meanimation" v-for="item in musicList" @click="goMusic(item.id,item.musicPath)"
				:animation="animationData">

				<view class="bg-video bg-mask flex  shadow-blur voidS ">
					<video :src="item.videoPath" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover"></video>
					<cover-view>
						<cover-view class="padding-left-sm text-white text">
							{{item.musicName}}
						</cover-view>
						<cover-view class="metext text-grey margin-left-lg">
							{{item.lyric}}
						</cover-view>
					</cover-view>


				</view>

			</view>
		</view>
	</view>
</template>


<script>
	import foo from "@/config/goMusics.js"
	import pro from "@/config/pro.js"
	const innerAudioContext = wx.createInnerAudioContext();
	export default {
		//用与给其他页面调用播放方法
		mounted() {
			var that = this;
			foo.$on("gotomusic", function(id, person) {
				that.goMusic(id, person)
			});
			this.getMusicList();
		},
		data() {
			return {
				isGoMusic: true, //记录开始还是暂停
				musicIDs: '', //判断是暂停还是切歌(歌曲id是否改变)
				isActive: false,
				musicList: [],
				animationData: {}
			}
		},
		methods: {
			getMusicList() {
				// 容器调用必填环境id，不能为空
				var c1 = new wx.cloud.Cloud({
					resourceEnv: 'prod-0g36g611fc13d81b'
				})
				c1.init()
				c1.callContainer({
					config: {
						env: "prod-0g36g611fc13d81b"
					},
					path: "/musics/musicList",
					header: {
						"X-WX-SERVICE": "springboot-3fzy",
						"content-type": "application/json"
					},
					"method": "GET",
					"data": "",
					success: (res) => {
						this.musicList = res.data.data
						this.musicList.forEach(function(item) {
							item.videoPath = pro.imagePrefix + item.videoPath;
						})
					}
				})
				// uni.request({
				// 	url: pro.apiPrefix + 'musics/musicList',
				// 	success: (res) => {
				// 		this.musicList = res.data.data
				// 		this.musicList.forEach(function(item) {
				// 			item.videoPath = pro.imagePrefix + item.videoPath;
				// 		})
				// 	}
				// }),
			},
			goMusic(musicID, path) {

				//不为同一首歌且为暂停的时候。把状态改为true
				if (this.musicIDs != musicID && this.isGoMusic === false) {
					this.isGoMusic = true
				}
				//以下代码模拟接口调用。跟换音乐id

				this.musicIDs = musicID
				innerAudioContext.src = pro.imagePrefix + path;
				console.log(pro.imagePrefix + path);
				//播放还是暂停
				if (this.isGoMusic) {
					innerAudioContext.pause();
					innerAudioContext.play();
					this.isGoMusic = false
				} else {
					innerAudioContext.pause()
					this.isGoMusic = true
				}
			}
		},


	}
</script>

<style>
	.voidS {
		width: 100%;
		height: 120px;
	}

	.voidBody {
		margin-top: 50px;
	}

	.text {
		padding-top: 55px;
	}

	.metext {
		line-height: 25px;
		font-size: 11px;
	}

	.row {
		align-items: center;
		justify-content: center;
	}

	.box {
		margin: 20px;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		width: 200rpx;
		height: 200rpx;
		background-color: #007AFF;
		transition-property: width, height, background-color;
		transition-duration: 0.3s;
		transition-delay: 0.1s;
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
	}

	.active {
		width: 300rpx;
		height: 300rpx;
		background-color: #6bd8ff;
	}

	.img {
		width: 80rpx;
		height: 80rpx;
	}

	.likeButton {
		position: relative;
		top: 55px;

	}

	.Meanimation:active {

		opacity: 0.6;
		transition: 0s;
		/*取消过渡*/
	}
</style>